<template>
  <div class="shopping_car">
    <NavBar :isLeftBtn="true" title="订单" />
    <van-tabs
      :color="'#1baeae'"
      :title-active-color="'#1baeae'"
      :before-change="beforeChange"
      v-model="status"
    >
      <van-tab
        v-for="item in orderTab"
        :title="item.name"
        :key="item.id"
        :name="item.id"
      >
        <div v-if="list.length != 0">
          <div
            class="goods_item"
            v-for="(listItem, index0) in list"
            :key="index0"
          >
            <div class="order_time">
              <span>{{ listItem.createTime }}</span>
              <van-tag
                type="success"
                v-if="listItem.orderStatusString == '已支付'"
                >{{ listItem.orderStatusString }}</van-tag
              >
              <van-tag v-else type="danger">{{
                listItem.orderStatusString
              }}</van-tag>
            </div>
            <div>
              <van-card
                v-for="(goodItem, index2) in listItem.newBeeMallOrderItemVOS"
                :key="index2"
                :num="goodItem.goodsCount"
                tag="爆款"
                :price="goodItem.sellingPrice"
                desc="没字段辣!"
                :title="goodItem.goodsName"
                :thumb="$filters.prefix(goodItem.goodsCoverImg)"
                :origin-price="goodItem.sellingPrice"
                @click="handNavDetails(listItem.orderNo)"
              />
            </div>
          </div>
          <van-divider>到底了~</van-divider>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://img.yzcdn.cn/vant/empty-image-error.png"
          description="没有查询到相关订单"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavBar from "@/components/NavBar.vue";
import { getOrderList } from "@/utils/apis/order";
import { orderTab } from "@/utils/local-data";
import router from "@/router";
export default defineComponent({
  name: "site",
  components: { NavBar },

  setup() {
    const state = reactive({
      status: "",
      list: [],
      orderTab: orderTab,
    });
    const init = async (index?: number) => {
      const res = await getOrderList({
        pageNumber: 1,
        status: index === undefined ? "" : index,
      });
      state.list = res.data.list;
    };
    onMounted(() => {
      init();
    });
    const beforeChange = (index: number) => {
      return new Promise((resolve) => {
        // 在 resolve 函数中返回 true 或 false
        init(index);
        resolve(true);
      });
      // init()
    };
    const handNavDetails = (id: string) => {
      router.push({
        path: "/orderDetails",
        query: {
          id,
        },
      });
    };
    return {
      ...toRefs(state),
      beforeChange,
      handNavDetails,
    };
  },
});
</script>
<style lang="scss" scoped>
.shopping_car {
  background-color: #fff;
}
.goods_item {
  width: 96%;
  padding: 10px 10px;
  margin: 10px auto;
  box-sizing: border-box;
  background-color: #f7f7f7;
  border-radius: 6px;
  .order_time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>
